<template>
	<view class="content ">
		<view class="image b">
			<text class="text-bold text-xxl text text-Abc" style="color: #FFFFFF;">{{ kaliveinfo.name }}</text>
			<view class="content-info">
				<!-- <text style="color: #FFFFFF; font-size: 40rpx; float: left;">云库存: {{ card_num ? card_num : 0 }}</text> -->
				<!-- <text style="color: #FFFFFF; font-size: 40rpx; float: right;">折扣卡累计: {{ discount ? discount : 0 }}</text> -->
			</view>
		</view>

		<view class="text_tab">
			<view class="">
				折扣卡团购累计
			</view>
			<view class="">
				机油团购累计
			</view>
		</view>

		<view class="nav-table">
			<view class="box1">
				<view class="nav-tile">
					<view class="">
						云库存累计
					</view>
					<view class="nav-colo">
						{{ card_num ? card_num : 0 }}
					</view>
				</view>
				<view class="nav-tile">
					<view class="">
						折扣卡累计
					</view>
					<view class="nav-colo">
						{{ team_card_cont ? team_card_cont : 0 }}
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="nav-tile">
					<view class="">
						机油折扣
					</view>
					<view class="nav-colo">
						{{discount ? discount : 0}}
					</view>
				</view>
				<view class="nav-tile">
					<view class="">
						团购累计
					</view>
					<view class="nav-colo">
						{{shopro_order_sum ? shopro_order_sum : 0}}
					</view>
				</view>
			</view>
		</view>



		<view class="btn padding ">
			<view class="flex justify-between">
				<!-- <view class="btn-left b" @click="modalName1 = true">购买会员卡</view> -->
				<view class="btn-left b" @click="mberClass">购买折扣卡</view>
				<view class="btn-right b" @click="modalName = true">激活会员卡</view>
			</view>
			<view class="btn-right b margin-top" @click="modalName2 = true" style="width: 100%; letter-spacing: 20rpx;">提卡</view>
		</view>


		<!-- 激活会员卡 -->
		<view class="cu-modal" :class="modalName ? 'show' : ''">
			<view class="cu-dialog response " style="padding-bottom: 50rpx;">
				<view class="cu-bar f  " style="justify-content: flex-end;">
					<view class="action padding-right" @tap="hideModal" style="display: flex; justify-content: flex-end;">
						<text class="cuIcon-close " style="color: #4D4D4D;"></text>
					</view>
				</view>
				<text class="  " style="#333333">激活会员卡</text>
				<view class="padding  ">
					<input type="text " adjust-position value="" v-model="cardnumber" class="solid r flex justify-start " placeholder="请输入激活卡卡密"
					 placeholder-class="ddd" />
				</view>
				<view class="btn-right11 block  " @click="activation">立即激活</view>
			</view>
		</view>








		<view class="cu-modal" :class="modalName1 ? 'show' : ''">
			<view class="cu-dialog response " style="padding-bottom: 50rpx;">
				<view class="cu-bar f  " style="justify-content: flex-end;">
					<view class="action padding-right" @tap="hideModal" style="display: flex; justify-content: flex-end;">
						<text class="cuIcon-close " style="color: #4D4D4D;"></text>
					</view>
				</view>
				<view class="flex justify-between padding-lr">
					<text class="text-price " style="color: #4D4D4D;">总价:{{ jiage ? jiage : '' }}</text>
					<text class="text-price  " style="color: #4D4D4D;">单价:{{ priceInfo }}</text>
					<!-- <text v-if="priceInfo == '' " class="text-price  " style="color: #4D4D4D;">单价:{{ kaliveinfo.price }}</text> -->
				</view>
				<view class="padding " @tap="jump('/pages/user/address/list')">
					<input type="text" disabled adjust-position v-model="addr" class="solid r " placeholder="请输入地址" placeholder-class="ddd" />
				</view>
				<!-- <view class="padding-lr  padding-bottom  " style="z-index: 999;">
					<input type="number" @input="enter" adjust-position v-model="cardnumber1" class="solid r  " placeholder="请输入会员卡数量"
					 placeholder-class="ddd" />
				</view> -->
				<view class="box-tab">
					<view v-for="(item, index ) in user_card_live" :key="index" @tap='addClass(item, index)'>
						<text :class="[index==selet ? 'boder-btn' :'bgc']">{{item.card_num}}</text>
					</view>
				</view>

				<view class="btn-right11 block " @click="activation1">购买折扣卡</view>
			</view>
		</view>



		<!-- 购买成功成功后的弹框地址 -->
		<view class="cu-modal" :class="modalName3 ? 'show' : ''">
			<view class="cu-dialog response " style="padding-bottom: 50rpx;">
				<view class="cu-bar f  " style="justify-content: flex-end;">
					<view class="action padding-right" @tap="hideModal" style="display: flex; justify-content: flex-end;">
						<text class="cuIcon-close " style="color: #4D4D4D;"></text>
					</view>
				</view>
				<view class="" style="color: #eec57e; height: 30rpx; line-height: 30rpx; font-size: 30rpx;">
					请选择绑定区域
				</view>
				<view class="padding " @click="selCity">
					<input type="text" disabled adjust-position v-model="area_text" class="solid r " placeholder="请选择地址"
					 placeholder-class="ddd" />
				</view>
				<view class="btn-right11 block" @click="addSite">确定选择</view>
			</view>
		</view>






		<view class="cu-modal" :class="modalName2 ? 'show' : ''">
			<view class="cu-dialog response " style="padding-bottom: 50rpx;">
				<view class="cu-bar f  " style="justify-content: flex-end;">
					<view class="action padding-right" @tap="hideModal" style="display: flex; justify-content: flex-end;">
						<text class="cuIcon-close " style="color: #4D4D4D;"></text>
					</view>
				</view>
				<text class="" style="color: #333333;">提卡</text>

				<view class="padding">
					<input type="number " adjust-position value="" v-model="numOfTikka" class="solid r " placeholder-class="ddd" />
				</view>
				<view class="btn-right11 block margin-top" @click="tikka">立即提卡</view>

				<text class="  margin-bottom block" style="color: #FF4141; margin-top: 48rpx;">* 注意,提卡后不能再经系统售出!</text>
			</view>
		</view>



		<view class="text-bold padding-lr" style="font-size: 30rpx; color: # ;">
			<text class="cuIcon-title"></text>
			已购买的会员卡
			<!-- <view class="text-box" style="float: right;" @tap="jump('pages/user/yemian')">
				查看代理>>
			</view> -->
		</view>





		<!-- <view class=""> -->
		<!-- <block v-if="emptyShow">
				<view class="animation-fade" style="width: 200rpx; height: 150rpx; margin: 0 auto; margin-top: 30rpx;">
					<xw-empty :isShow="emptyShow" class="" text="暂无会员卡数据" textColor="#777777" style="font-size: 25rpx; text-align: center;   "></xw-empty>
				</view>
			</block> -->

		<view class="padding-top-xs padding-lr" v-for="(item, index) in data" :key="index">
			<view class="padding b r" style="display: flex; background-color: #FFFFFF; justify-content: space-around; font-size: 25rpx;">
				<text class="text-gray f-1 f  j-c">
					<text style="font-size: 28rpx;margin-right: 10rpx;">会员卡:</text>
					{{ item.number }}
				</text>
				<text class="text-gray f-1 j-c">
					<text style="font-size: 28rpx;margin-right: 10rpx;">时间:</text>
					{{ item.createtime | timeDateFormat }}
					<text style="margin-left: 10rpx; display: inline-block;padding: 10rpx;border: 1rpx solid #eec57e;border-radius: 10rpx;" @tap="clapPay(item.number)">复制</text>
				</text>
			</view>
		</view>
		<!-- </view> -->




		<shopro-picker ref="shoproCity" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm"></shopro-picker>
		<shopro-picker2 ref="shoproCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm"></shopro-picker2>
	</view>
</template>

<script>
	import xwEmpty from '@/components/xw-empty/xw-empty';
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			xwEmpty
		},

		data() {
			return {
				title: 'Hello',
				number: '',
				modalName: false,
				modalName1: false,
				modalName2: false,
				modalName3: false,
				cardnumber: '',
				data: [],
				cardnumber1: '',
				card_num: '',
				kaliveinfo: {},
				cityPickerValue: [0, 0],
				cityPickerValueDefault: [0, 0, 0],
				jiage: '',
				numOfTikka: '', // 提卡数量
				emptyShow: false,
				address_id: '',
				addr: '',

				address: '',
				user_card_live: [], // 会员等级列表
				priceInfo: '',
				agent_region: '', // 代理级别
				area_text: '',
				selet: 0,

				addressData: {
					id: 0,
					consignee: '',
					phone: '',
					area_id: '',
					address: '',
					is_default: false,
					latitude: '',
					longitude: ''
				},
				team_card_cont: '', // 
				shopro_order_sum: '', // 我的团队业绩
				clicked: 0,
				border: {
					border: '1rpx solid #0081FF;'
				},
				discount: '',
				platform: '',
			};
		},
		watch: {
			calc(newValue, oldValue) {
				return Number(newValue) * Number(oldValue);
			},
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		onShow() {
			console.log('this.address :>> ', this.address);
			var x = this.address;
			if (x) {
				this.addr = x.province_name + '-' + x.city_name + '-' + x.area_name;

				this.address_id = x.id;
			}
			this.$forceUpdate();
		},
		onLoad() {
			this.mshpCrd();
			this.my_card();
			this.platform = uni.getStorageSync('platform')
		},
		methods: {
			
			clapPay(cpy) {
				console.log('cpy',cpy)
				uni.setClipboardData({
				    data: cpy,
				    success: function () {
						uni.$showMsg('复制成功')
				    }
				});
			},
			
			
			addClass(item, index) {
				this.selet = index
				this.cardnumber1 = item.card_num
				this.jiage = (this.cardnumber1 * Number(item.price)).toFixed(2);
				this.priceInfo = item.price;

			},

			onCancel(e) {
				this.addressData.area_id = e.cityCode;
				this.area_text = e.label;
			},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas,
				});
			},
			onConfirm(e) {
				console.log('确定选择后的事件', e.cityCode)
				this.addressData.area_id = e.cityCode;
				this.area_text = e.label;


				//this.modalName1 = true;

				this.addr = e.label; //cityCode
				this.address_id = e.cityCode; //cityCode
			},
			selCity() {

				// agent_level 2=可选市代理3=可选区代理
				console.log('000', this.userInfo.agent_level)
				var info = this.userInfo.agent_level
				if (info == 2) {
					this.$refs.shoproCityPicker.show();
				}
				if (info == 3) {
					this.$refs.shoproCity.show();
				}


				//this.modalName1 = false;
			},


			hideModal() {
				this.modalName = false;
				this.modalName1 = false;
				this.modalName2 = false;
				this.modalName3 = false;
				this.cardnumber1 = '';
				this.cardnumber = '';
				this.jiage = '';
				this.numOfTikka = '';
				//this.address_id = '';
				this.addr = '';
				this.area_text = ''
			},

			// 提卡
			async tikka() {
				if (!this.numOfTikka) return uni.$showMsg('请输入提卡数量后再提交!');
				const res = await this.$api('tikka', {
					returnnum: this.numOfTikka
				});
				this.modalName2 = false;
				this.numOfTikka = '';
				this.my_card();
				this.mshpCrd();
			},

			//我购买的会员卡
			async mshpCrd() {
				console.log('this.cardnumber',this.cardnumber)
				const res = await this.$api('my_card_list', {
					cardnumber: this.cardnumber
				});
				this.data = res.data.data;
				console.log(this.data.length, '1111')
				if (this.data.length == 0) {
					this.emptyShow = true;
				}
				console.log('res*9*9 :>> ', this.data);
			},

			// 购买会员卡
			async activation1() {
				
				if (!this.address_id) return uni.$showMsg('请输入地址!');
				const res = await this.$api('buycard', {
					num: this.cardnumber1,
					address_id: this.address_id
				});

				var _this = this;
				if (res.code) {
					_this.pay(res.data.order_number);
				}
			},

			// 购买成功后选择的地址提交事件
			async addSite() {
				if (!this.addr) return uni.$showMsg('请输入地址!');
				const res = await this.$api('regionAdd', {
					agent_region: this.userInfo.agent_level,
					agent_region_code: this.addressData.area_id
				});
				this.modalName3 = false
			},

			async pay(order_number) {
				

				if ( this.platform !== 'wxMiniProgram') {
					
					const res = await this.$api('prepay', {
						order_sn: order_number,
						payment: 'alipay',
						type: 'buyka',
					});
					
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.pay_data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						success: function(res) {
							this.my_card();
							this.mshpCrd();
							if (this.userInfo.agent_xuanze == 1) {
								this.modalName3 = true
							}
					
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else {
					
					const res = await this.$api('prepay', {
						order_sn: order_number,
						payment: 'wechat',
						type: 'buyka',
						platform: 'wxMiniProgram'
					});
					
					// payment=wechat
					// platform=wxMiniProgram
					
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.pay_data.timeStamp,
						nonceStr: res.data.pay_data.nonceStr,
						package: res.data.pay_data.package,
						signType: res.data.pay_data.signType,
						paySign: res.data.pay_data.paySign,
						success: res => {
							console.log('success:支付成功' + JSON.stringify(res));
							this.modalName1 = false;
					
							this.my_card();
							this.mshpCrd();
					
							// 显示弹框 
							// agent_xuanze:0=没有选择条件1有选择条件
							console.log('this.userInfo.agent_xuanze', this.userInfo.agent_xuanze)
							if (this.userInfo.agent_xuanze == 1) {
								this.modalName3 = true
							}
					
						},
						fail: err => {
							console.log('fail:' + JSON.stringify(err));
						},
					});
				}
			},

			async activation() {
				if (!this.cardnumber) return uni.$showMsg('请输入激活卡密!');
				const res = await this.$api('gouka', {
					cardnumber: this.cardnumber
				});
				uni.$showMsg(res.msg, 2000);
				this.cardnumber = '';
				// this.modalName = false;
			},
			async my_card() {
				const res = await this.$api('my_card');



				// 机油 card_num=云库存 team_card_cont=折扣卡累计 discount=机油折扣    shopro_order_sum=团队累计

				this.user_card_live = res.data.user_card_live;
				this.kaliveinfo = res.data.kaliveinfo; // name price
				this.card_num = res.data.card_num; // 云库存累计
				this.team_card_cont = res.data.team_card_cont; // 折扣卡累计 
				this.discount = res.data.discount; // 机油折扣 
				this.shopro_order_sum = res.data.shopro_order_sum; // 团购累计

			},

			// 点击购买会员卡
			mberClass() {
				this.my_card();
				this.priceInfo = this.user_card_live[0].price
				this.modalName1 = true
				this.addr = ''
				this.cardnumber1 = this.user_card_live[0].card_num

			}
		},
		filters: {
			timeDateFormat: function(msg) {
				//讲字符串转为Date格式
				var msg1 = msg * 1000;
				var mt = new Date(msg1);
				//获取年份
				var year = mt.getFullYear();
				//从0开始，获取月份
				var month = (mt.getMonth() + 1).toString().padStart(2, '0');
				//获取天数
				var day = mt
					.getDay()
					.toString()
					.padStart(2, '0');
				/* if (con === 'yyyy/mm/dd'){
	                    return year + "/" + month + "/" + day;
	                }*/
				//获取小时
				var hh = mt
					.getHours()
					.toString()
					.padStart(2, '0');
				//获取分钟
				var mm = mt
					.getMinutes()
					.toString()
					.padStart(2, '0');
				//获取秒
				var ss = mt
					.getSeconds()
					.toString()
					.padStart(2, '0');

				return year + '-' + month + '-' + day;
				//+ hh + ':' + mm + ':' + ss;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bor {
		border: 3px solid #0081FF;
	}

	.content {
		background-color: #F9F9F9;
		height: 100vh;

		.text_tab {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 32rpx;
			font-weight: 700;
			color: #333333;
			font-family: PingFang SC;
		}

		.nav-table {
			width: 100%;
			height: 270rpx;
			display: flex;
			margin: 0 20rpx;
			font-size: 28rpx;
			color: #666666;
			font-weight: bold;
			justify-content: space-between;

			.box1 {
				width: 340rpx;
				padding: 30rpx 0;
				text-align: center;
				margin: 0 21rpx 0 0;
				border-radius: 20rpx;
				background-color: #FFFFFF;
			}

			.nav-tile {
				height: 120rpx;
			}

			.nav-colo {
				color: #EEC57E;
			}

			.box2 {
				width: 340rpx;
				padding: 30rpx 0;
				text-align: center;
				margin: 0 40rpx 0 0;
				border-radius: 20rpx;
				background-color: #FFFFFF;
			}
		}

		.content-info {
			width: 580rpx;
			font-weight: bold;
			margin-top: 30rpx;

			text {
				font-family: PingFang SC;
			}
		}

		.box-tab {
			width: 100%;
			height: 100rpx;
			display: flex;
			line-height: 100rpx;
			margin-bottom: 40rpx;
			justify-content: space-around;

			.boder-btn {
				padding: 20rpx;
				border-radius: 20rpx;
				border: 1rpx solid #eec57e;
				// margin-left: -72rpx;
			}

			.bgc {
				padding: 20rpx;
				border-radius: 20rpx;
				border: 1rpx solid #EEEEEE;
			}
		}

		input {
			height: 80rpx;
			line-height: 80rpx;
			padding: 10rpx;
		}

		.btn-right11 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 340rpx;
			height: 86rpx;
			background: #eec57e;
			border-radius: 20rpx;
			margin: 0 auto;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}

		.image {
			width: 702rpx;
			height: 310rpx;
			background: linear-gradient(-55deg, #726d6d, #403c3d);
			box-shadow: 0rpx 3rpx 15rpx 0rpx rgba(170, 81, 1, 0.4);
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			text {
				font-family: PingFang SC;
			}
		}

		.btn {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.btn-left,
			.btn-right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 340rpx;
				height: 86rpx;
				background: #eec57e;
				border-radius: 20rpx;

				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}

		.upg {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.list {
			display: flex;
			flex-direction: column;
			background-color: #ffffff;

			image {
				width: 25rpx;
				height: 25rpx;
			}

			text {
				display: block;
				width: 100%;

				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #eec57e;
			}
		}
	}
</style>
